<!DOCTYPE html>
<html class="x-admin-sm">

    <head>
        <meta charset="UTF-8">
        <title>角色菜单分配页面</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="/css/font.css">
        <link rel="stylesheet" href="/css/xadmin.css">
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>

    <body>
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-body ">
                            <table class="layui-table layui-form" id="tree-table"></table>
                        </div>
                    </div>
                    <button style="text-align: center" class="layui-btn" id="sumbitMenu" ><i class="layui-icon">&#xe615;</i>确定分配</button>
                </div>
            </div>
        </div>
    </body>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script>
        layui.extend({ treeTable: '/js/treeTable'}).use(['treeTable','layer','code','form'],function(){
            var o = layui.$, form = layui.form, layer = layui.layer, treeTable = layui.treeTable;
            // 直接下载后url: './data/table-tree.json',这个配置可能看不到数据，改为data:[],获取自己的实际链接返回json数组
            var index;
            $.ajax({
                url : "/sys/role/getMenuByRoleId",
                type : "POST",
                data :{"roleid":getUrlParam("roleid")},
                dataType : "json",
                beforeSend : function(XMLHttpRequest) {
                    index = layer.msg('正在加载数据中，请稍候', {
                        icon : 16,
                        time : false,
                        shade : 0.8
                    });
                },success : function(data) {
                    if(data.success){
                        var	re = treeTable.render({
                            elem: '#tree-table',
                            url: '/menu/list',// （url和data参数必须设置一个）
                            icon_key: 'title',
                            hide_class: 'layui-hide',
                            primary_key: 'menuid',
                            parent_key: 'parentid',
                            is_checkbox: true,
                            checked: {
                                key: 'menuid',
                                data: data.data,
                            },cols: [{
                                key: 'title',
                                title: '名称',
                                template: function(item){
                                    if(item.level == 0){
                                        return '<span style="color:red;">'+item.name+'</span>';
                                    }else if(item.level == 1){
                                        return '<span style="color:green;">'+item.name+'</span>';
                                    }else if(item.level == 2){
                                        return '<span style="color:#aaa;">'+item.name+'</span>';
                                    }
                                }
                            }
                            ]
                        });

                        // 确认分配提交按钮 获取选中值，返回值是一个数组（定义的primary_key参数集合）
                        $("#sumbitMenu").on("click",function () {
                            var menuids=treeTable.checked(re).join(',');
                            $.ajax({
                                url : "/sys/role/updateMenuByRoleId",
                                type : "POST",
                                data : {"menuids":menuids,"roleid":getUrlParam("roleid")},
                                dataType : "json",
                                beforeSend : function(XMLHttpRequest) {
                                    index = layer.msg('正在提交数据中，请稍候', {
                                        icon : 16,
                                        time : false,
                                        shade : 0.8
                                    });
                                },success : function(data) {
                                    if(data.success){
                                        // 刷新父页面
                                        layer.alert(data.msg, {
                                            icon : 6
                                        }, function() {
                                            xadmin.close();
                                            // 刷新父页面
                                            parent.location.reload();
                                        });
                                    }else{
                                        xadmin.alert(data.msg,2)
                                    }
                                },complete : function(XMLHttpRequest, textStatus) {
                                    layer.close(index);
                                },error : function(data) {
                                    layer.alert('网络异常或者数据错误', {
                                        icon : 2
                                    });
                                }
                            });
                        })
                    }else{
                        xadmin.alert(data.msg,2)
                    }
                },complete : function(XMLHttpRequest, textStatus) {
                    layer.close(index);
                },error : function(data) {
                    layer.alert('网络异常或者数据错误', {
                        icon : 2
                    });
                }
            });
        })



        /**
         * 取得url参数
         */
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  // 匹配目标参数
            if (r != null) return unescape(r[2]); return null; // 返回参数值
        }

    </script>
</html>
